import * as echarts from "echarts/lib/echarts";

import { GridComponent } from "echarts/components";

echarts.use(GridComponent);

// echarts.init(document.getElementById('idididid')).setOption()

class Echarts {
  /**
   * $options: echarts配置
   * @protected {import('echarts').EChartsCoreOption} $options
   */
  // $options = {};
  /**
   * $root: 需要渲染的echarts的根节点元素
   * @protected {HTMLElement} $root
   */
  // $root;

  /**
   * @constructor init echarts
   * @description 初始化echart配置
   * @param {import('echarts').EChartsCoreOption} options
   */
  constructor(options, rootElement) {
    this._setOptions(options);
    this._setRoot(rootElement);

    this.render();
  }
  /**
   * set echarts's options
   */
  _setOptions(options) {
    this.$options = options;
  }
  /**
   * set ehcarts's root
   * @param {HTMLElement | null} rootElement
   */
  _setRoot(rootElement) {
    if (this.$root) {
      this.$root = null;
    }
    if (rootElement) {
      this.$root = rootElement;
    } else {
      const newElement = document.createElement("div");
      newElement.id = "echart-render-item";
      this.$root = newElement;
    }
  }

  /**
   * 渲染echarts视图
   * @return {void}
   */
  render() {
    echarts.init(this.$root).setOption(this.$options);
  }
}

export default Echarts;
